<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/jquery.textcomplete.css' />
    <link rel="stylesheet" href="/stylesheets/side-menu.css">
    <link rel="stylesheet" href="/stylesheets/jquery-ui.min.css">
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <% include statsheader %>
    
</head>
<body>
<% include statsabove %>
<div id="layout">
    <!-- Menu toggle -->
    <a href="#menu" id="menuLink" class="menu-link">
        <!-- Hamburger icon -->
        <span></span>
    </a>

    <%- include('components/common/menu') %>




    <div id='content'>

        <div id='welcomemessage'>

            Create a text network visualization of any web page:

            <% include messages %>

            <form action='/import' name='submitform' id="submitform" method='post' class='pure-form pure-form-stacked'>
                    <br>

                    <input type="hidden" name="source" value="url">

                    <select name="urlselect" id="urlselect">
                      <option value="https://guardian.co.uk">The Guardian Main Page</option>
                      <option value="https://www.nytimes.com/">The New York Times Main Page</option>
                      <option value="https://www.wsj.com/">The Wall Street Journal Main Page</option>
                      <option value="https://en.wikipedia.org/wiki/Text_mining" selected>A Wikipedia Article</option>
                      <option value="https://aeon.co">Aeon Main Page</option>
                      <option value="http://">Any Other Page</option>
                    </select>
                    <br>
                    <a href="javascript:" id="advancedpane">+ settings</a>
                    <br>
                    <div id="urlsetting">
                      <br>
                        Please, enter the full URL:
                        <input type="text" name="url" id="url" size="30" value="https://en.wikipedia.org/wiki/Text_mining"/>


                    </div>

                    <div id="advancedsettings">
                        <br>
                      <label for="processfield" class="pure-radio" id="processfieldcaption">
                          Article snippets located in class or id
                          <input type="text" name="processfield" id="processfield" value=""/>
                      </label>

                      <label for="processheadline" class="pure-radio" id="processfieldcaption">
                          Headlines of articles are in class
                          <input type="text" name="processheadline" id="processheadline" value=""/>
                      </label>

                      <label for="processteaser" class="pure-radio" id="processfieldcaption">
                          Teaser of articles are in class
                          <input type="text" name="processteaser" id="processteaser" value=""/>
                      </label>

                      <label for="processurl" class="pure-radio" id="processfieldcaption">
                          URLS to articles are in class
                          <input type="text" name="processurl" id="processurl" value=""/>
                      </label>
                    </div>


                <br>
                Save in Context:
                <br>
                <input type='text' name='context' id="context" value='<% if (context) { %><%= context %><% } else { %>wikipedia<% } %>'/>
                <br>


                <input type="hidden" id="selectedContexts" name="selectedContexts" value="">
                <input type="hidden" name="statementid" value="">
                &nbsp;<br>
                <input type='submit' name="submit" value="save" class="pure-button pure-button-primary">
                <div id="message"></div>
            </form>   &nbsp;<br>&nbsp;<br>





        </div>

        <div id="graph-container"></div>


    </div>




</div>


<script src="/javascripts/jquery.min.js"></script>
<script src="/javascripts/jquery-ui.min.js"></script>
<script src="/javascripts/string.min.js"></script>
<script src="/javascripts/underscore-min.js"></script>
<script src="/javascripts/jquery.textcomplete.js"></script>
<script src='/javascripts/jquery.autosize.js'></script>
<script src="/javascripts/ui.js"></script>
<script src="/javascripts/jquery.mobile-events.min.js"></script>


<script>

      $(document).ready(function () {


          var advancedpane = 0;

          $("#advancedsettings").hide();
        //  $('#urlsetting').hide();

          $("#advancedpane").click(function() {
              if (!advancedpane) {
              $("#advancedsettings").show();
              $("#advancedpane").text('– settings');
            //  $("#urlsetting").show();
              advancedpane = 1;
              }
              else {
              $("#advancedsettings").hide();
              $("#advancedpane").text('+ settings');
              advancedpane = 0;

              }

          });

          $('#urlselect').change(function () {

            $('#url').val(($(this).val()));

            var a = document.createElement("a");
            a.href=$(this).val();
            //hide it from view when it is added
            a.style.display="none";

            var currentdomain = getDomain(a.hostname);
            $('#context').val(currentdomain);

            if (currentdomain == 'guardian') {
              $('#processfield').val('.fc-item__container');
              $('#processheadline').val('.fc-item__header');
              $('#processteaser').val('.fc-item__standfirst');
              $('#processurl').val('.fc-item__link');
            }
            else if (currentdomain == 'wsj') {
              $('#processfield').val('.wsj-card');
              $('#processheadline').val('.wsj-headline');
              $('#processteaser').val('.wsj-card-body');
              $('#processurl').val('.wsj-headline-link');

            }
            else if (currentdomain == 'nytimes') {
              $('#processfield').val('.collection');
              $('#processheadline').val('.story-heading');
              $('#processteaser').val('.summary');
              $('#processurl').val('.story-heading');
            }
            else if (currentdomain == 'wikipedia') {
              $('#processfield').val('');
              $('#processheadline').val('');
              $('#processteaser').val('');
              $('#processurl').val('');
            }
            else if (currentdomain == 'aeon') {
              $('#processfield').val('.article-card__contents');
              $('#processheadline').val('.article-card__title');
              $('#processteaser').val('.article-card__standfirst');
              $('#processurl').val('.article-card__title');
            }
            else {
              $('#processfield').val('');
              $('#processheadline').val('');
              $('#processteaser').val('');
              $('#processurl').val('');
            //  $('#urlsetting').show();
            }


          });

          $('#url').on('input', function() {

            if ($(this).val().substr(0,4) != 'http') {
              $(this).val('http://' + $(this).val());
            }

            var a = document.createElement("a");
            a.href=$(this).val();
            //hide it from view when it is added
            a.style.display="none";
            $('#context').val(getDomain(a.hostname));

            $('#processfield').val('');
            $('#processheadline').val('');
            $('#processteaser').val('');
            $('#processurl').val('');

          //  $('#urlselect').val('http://').change();

          });


          $('form#submitform').submit(function(){
                $(this).find('input[type=submit]').attr('disabled', 'disabled');
                  $('#message').html('We are importing the data, this page will automatically reload. If this does not happen in 30 seconds, please, <a href="/<%= user.name %>/'+$('#context').val()+'/edit">click here</a>.');
          });




          // http://data.iana.org/TLD/tlds-alpha-by-domain.txt
          var TLDs = ["ac", "ad", "ae", "aero", "af", "ag", "ai", "al", "am", "an", "ao", "aq", "ar", "arpa", "as", "asia", "at", "au", "aw", "ax", "az", "ba", "bb", "bd", "be", "bf", "bg", "bh", "bi", "biz", "bj", "bm", "bn", "bo", "br", "bs", "bt", "bv", "bw", "by", "bz", "ca", "cat", "cc", "cd", "cf", "cg", "ch", "ci", "ck", "cl", "cm", "cn", "co", "com", "coop", "cr", "cu", "cv", "cx", "cy", "cz", "de", "dj", "dk", "dm", "do", "dz", "ec", "edu", "ee", "eg", "er", "es", "et", "eu", "fi", "fj", "fk", "fm", "fo", "fr", "ga", "gb", "gd", "ge", "gf", "gg", "gh", "gi", "gl", "gm", "gn", "gov", "gp", "gq", "gr", "gs", "gt", "gu", "gw", "gy", "hk", "hm", "hn", "hr", "ht", "hu", "id", "ie", "il", "im", "in", "info", "int", "io", "iq", "ir", "is", "it", "je", "jm", "jo", "jobs", "jp", "ke", "kg", "kh", "ki", "km", "kn", "kp", "kr", "kw", "ky", "kz", "la", "lb", "lc", "li", "lk", "lr", "ls", "lt", "lu", "lv", "ly", "ma", "mc", "md", "me", "mg", "mh", "mil", "mk", "ml", "mm", "mn", "mo", "mobi", "mp", "mq", "mr", "ms", "mt", "mu", "museum", "mv", "mw", "mx", "my", "mz", "na", "name", "nc", "ne", "net", "nf", "ng", "ni", "nl", "no", "np", "nr", "nu", "nz", "om", "org", "pa", "pe", "pf", "pg", "ph", "pk", "pl", "pm", "pn", "pr", "pro", "ps", "pt", "pw", "py", "qa", "re", "ro", "rs", "ru", "rw", "sa", "sb", "sc", "sd", "se", "sg", "sh", "si", "sj", "sk", "sl", "sm", "sn", "so", "sr", "st", "su", "sv", "sy", "sz", "tc", "td", "tel", "tf", "tg", "th", "tj", "tk", "tl", "tm", "tn", "to", "tp", "tr", "travel", "tt", "tv", "tw", "tz", "ua", "ug", "uk", "us", "uy", "uz", "va", "vc", "ve", "vg", "vi", "vn", "vu", "wf", "ws", "xn--0zwm56d", "xn--11b5bs3a9aj6g", "xn--3e0b707e", "xn--45brj9c", "xn--80akhbyknj4f", "xn--90a3ac", "xn--9t4b11yi5a", "xn--clchc0ea0b2g2a9gcd", "xn--deba0ad", "xn--fiqs8s", "xn--fiqz9s", "xn--fpcrj9c3d", "xn--fzc2c9e2c", "xn--g6w251d", "xn--gecrj9c", "xn--h2brj9c", "xn--hgbk6aj7f53bba", "xn--hlcj6aya9esc7a", "xn--j6w193g", "xn--jxalpdlp", "xn--kgbechtv", "xn--kprw13d", "xn--kpry57d", "xn--lgbbat1ad8j", "xn--mgbaam7a8h", "xn--mgbayh7gpa", "xn--mgbbh1a71e", "xn--mgbc0a9azcg", "xn--mgberp4a5d4ar", "xn--o3cw4h", "xn--ogbpf8fl", "xn--p1ai", "xn--pgbs0dh", "xn--s9brj9c", "xn--wgbh1c", "xn--wgbl6a", "xn--xkc2al3hye2a", "xn--xkc2dl3a5ee0h", "xn--yfro4i67o", "xn--ygbi2ammx", "xn--zckzah", "xxx", "ye", "yt", "za", "zm", "zw"].join()

          function getDomain(url){

              var parts = url.split('.');
              if (parts[0] === 'www' && parts[1] !== 'com'){
                  parts.shift()
              }
              var ln = parts.length
                , i = ln
                , minLength = parts[parts.length-1].length
                , part

              // iterate backwards
              while(part = parts[--i]){
                  // stop when we find a non-TLD part
                  if (i === 0                    // 'asia.com' (last remaining must be the SLD)
                      || i < ln-2                // TLDs only span 2 levels
                      || part.length < minLength // 'www.cn.com' (valid TLD as second-level domain)
                      || TLDs.indexOf(part) < 0  // officialy not a TLD
                  ){
                      return part
                  }
              }
          }

      });


</script>


<% include statsbelow %>
</body>
</html>
